<template>
<div class="index_left">
    <div class="menus">
        <Menu
            v-model:openKeys="openKeys"
            v-model:selectedKeys="selectedKeys"
            mode="inline"
            theme="dark"
            @select="onSelect"
            :items="menuList"></Menu>
        <div class="icp_no">
            <!-- <p><a class="pointer" href="https://beian.miit.gov.cn" target="_blank">闽ICP备xxxxxxxx号</a></p> -->
            <p v-for="(i, idx) in bookSupport" :key="idx">{{ i }}</p>
        </div>
    </div>
</div>
</template>

<script lang="jsx" setup>
import { ref, h, watch, onMounted, computed } from 'vue'
import { Menu } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import { setDynamicMenu } from '@/utils/dynamic'
import { useStore } from 'vuex'

const route = useRoute()
const router = useRouter()

const Store = useStore()



let dyMenu = setDynamicMenu()
console.log(dyMenu);
let defMenu = [
    {
        key: 'index',
        label: '首页',
        icon: () => (<i class="icon-home"></i>),
        path: '/base'
    },
    ...dyMenu
]
const menuList = ref(defMenu)

onMounted(() => {
    checkActName(route.path)
})

const bookSupport = computed(() => {
    let word = Store.state.user.account.bookSupport
    let wordArr = []
    if(word) {
        wordArr = word.split('\\n')
    }
    if(sessionStorage.support == 'lifa') {
        wordArr = ['厦门利发软件有限公司']
    }
    return wordArr
})

watch(() => route.path, (val) => {
    checkActName(val)
})

function onSelect(e) {
    let item = e.item
    router.push(item.path)
}


const selectedKeys = ref(['index']);
const openKeys = ref(['index']);
function checkActName(path) {
    // console.log(path, 'left-menu');
    let openkey = []
    let actKey = ''
    menuList.value.forEach((item, index) => {
        if(item.children) {
            item.children.forEach((i, idx) => {
                if(i.path == path) {
                    actKey = i.key
                    openkey = [item.key]
                }
            })
        } else {
            if(item.path == path) {
                actKey = item.key
            }
        }
    })

    selectedKeys.value = [actKey || '']
    openKeys.value = openkey
    // console.log(selectedKeys.value);
    // console.log(openKeys.value);
}
</script>

<style lang="less" scoped>
.index_left {
    height: 100%;
    flex-shrink: 0;
    display: flex;
    background: #041d34;
    position: relative;
    min-width: 18px;
    // padding-top: 10px;

    .ant-menu-dark {
        background: #113a61;
    }

    .shou_qi {
        position: absolute;
        right: 0;
        top: 50%;
        z-index: 999;

        i {
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
        }

    }

}

.menus {
    width: 100%;
    height: 100%;
    overflow: auto;
    // border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    justify-content: space-between;


    &::-webkit-scrollbar {
        width: 2px;
    }

    &::-webkit-scrollbar-thumb {
        cursor: pointer;
        background: #7ea5fc;
    }
}

.icp_no {
    font-size: 14px;
    color: #999;
    padding: 10px;

    p {
        text-align: center;
    }
}
</style>
